<template>
  <li class="table-form dict-table">
    <div class="type-title">
      <!-- 需要有值才能对参数进行新增 -->
      <el-form ref="formRef" :model="form" :inline="true">
        <el-form-item>
          <el-input
            v-model="form.dictValue"
            class="form-input"
            clearable
            :placeholder="$t('system.dictionary.paramValue')"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="checkList">{{
            $t("common.queryText")
          }}</el-button>
          <el-button type="success" @click="handlerAdd">{{
            $t("system.dictionary.newParam")
          }}</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="all-data">共 {{ total }} 条关联数据</div> -->
    </div>

    <!-- 表格 -->
    <hcTable
      :table-data="list"
      :options="tableOptions"
      :columns="tableColumn"
      @command="handleAction"
      @size-change="handlerPageSize"
      @current-change="handlerPageIndex"
    >
    </hcTable>
    <dictDialog
      :options="options"
      :paramType="form.dictType"
      @onCancel="closeDialog"
      @onSure="onSure"
    />
  </li>
</template>

<script setup name="dictTable">
import { reactive, toRefs, computed, defineProps, watch } from "vue";
import useTable from "@/hooks/useTable";
import dictDialog from "./dict-dialog.vue";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();

const dictTypeInfo = defineProps({
  options: {
    type: Object,
    default: () => {
      return {};
    },
  },
  pwd: {
    type: String,
    default: "",
  },
});

let isDict = false;

const baseUrl = `/Dictionary`;
const { list, total, loading, getList, addFun, updateFun, deleteFun } =
  useTable(baseUrl, true, false);

const tableColumn = [
  { type: "index", width: "50", label: "No.", align: "center" },
  {
    prop: "dictType",
    label: $t("system.dictionary.paramType"),
  },
  {
    prop: "dictLabel",
    label: $t("system.dictionary.paramKey"),
  },
  {
    prop: "dictValue",
    label: $t("system.dictionary.paramValue"),
  },
  {
    prop: "remark",
    label: $t("system.dictionary.remark"),
  },
  {
    label: $t("common.operate"),
    align: "center",
    fixed: "right",
    buttons: [
      {
        name: $t("common.edit"),
        type: "primary",
        command: "edit",
      },
      {
        name: $t("common.delText"),
        type: "danger",
        command: "delete",
      },
    ],
  },
];

const data = reactive({
  // 绑定数据
  form: {
    dictValue: "",
    dictType: "",
  },
  page: {
    pageSize: 20,
    pageIndex: 1,
  },
  options: {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curRole: null,
  },
});

const tableOptions = computed(() => {
  return {
    loading: loading.value,
    showPagination: true,
    // border: true,
    paginationConfig: {
      total: total.value,
      currentPage: data.page.pageIndex,
      pageSize: data.page.pageSize,
    },
  };
});

const params = computed(() => {
  let form = JSON.parse(JSON.stringify(data.form));
  Object.keys(form).forEach((key) => {
    if (form[key] === null) {
      form[key] = "";
    }
  });
  return {
    ...form,
    ...data.page,
  };
});
// 操作事件
const handleAction = (command, row) => {
  switch (command) {
    case "edit":
      handlerEdit(row);
      break;
    case "delete":
      handlerDel(row.id);
      break;
    default:
      break;
  }
};
// 点击查询
const checkList = () => {
  data.page.pageIndex = 1;
  loading.value = true;
  getList(params.value);
  loading.value = false;
};

watch(
  () => dictTypeInfo.options,
  (val) => {
    if (val.id) {
      const curUser = JSON.parse(JSON.stringify(val));
      for (let key in data.form) {
        data.form[key] = curUser[key];
      }
      isDict = true;
      checkList();
    } else {
      isDict = false;
    }
  },
  { immediate: true }
);
// 表请求条数改变
const handlerPageSize = (pageSize) => {
  data.page.pageSize = pageSize;
  data.page.pageIndex = 1;
  if (!isDict) return;
  getList(params.value);
};
// 表格页数改变
const handlerPageIndex = (pageIndex) => {
  data.page.pageIndex = pageIndex;
  if (!isDict) return;
  getList(params.value);
};

// 新增
const handlerAdd = () => {
  if (isDict) {
    data.options = {
      show: true,
      type: "add", // 用于判断是编辑还是删除 add edit
      curRole: data.form,
    };
  } else {
    ElMessage.warning("请先选中参数列别");
  }
};
// 编辑
const handlerEdit = async (item) => {
  data.options = {
    show: true,
    type: "edit", // 用于判断是编辑还是删除 add edit
    curRole: item,
  };
};
// 删除
const handlerDel = async (item) => {
  deleteFun([item], `${baseUrl}?password=${dictTypeInfo.pwd}`);
};
// 保存弹框
const onSure = (options) => {
  if (options.type === "add") {
    // 新增角色
    addFun(options.form, `${baseUrl}?password=${dictTypeInfo.pwd}`);
  } else {
    updateFun(options.id, options.form, "", `password=${dictTypeInfo.pwd}`);
    closeDialog();
  }
  // closeDialog()
};
// 关闭弹框
const closeDialog = () => {
  data.options = {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curRole: null,
  };
};

const { options, form } = toRefs(data);
</script>
<style lang="scss" scoped>
.dict-table {
  height: 100%;
  // background: #131f3b;
  .type-title {
    // margin-bottom: 10px;
    align-items: center;
    .select-text-container {
      .select-text {
        color: #409eff;
      }
    }
  }
}
.all-data {
  width: 100%;
  height: 28px;
  // background: rgba(227, 229, 231, 0.15);
  border-radius: 2px 2px 2px 2px;
  padding: 0px 24px;
  color: #409eff;
  margin-top: -10px;
}
</style>
